import React from 'react';
import ImageCode from './imageCode'
import pic1 from './icons/01.jpg';
import pic2 from './icons/02.jpg';
import pic3 from './icons/03.jpg';
import pic4 from './icons/04.jpg';
import pic5 from './icons/05.jpg';

const picArray = [pic1, pic2, pic3, pic4, pic5];

class Verify extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      url: ''
    }
  }

  componentDidMount() {
    this.setState({ url: picArray[Math.floor(Math.random() * 6)] })
  }

  onReload = () => {
    let index = Math.floor(Math.random() * 5);
    let random = picArray[index];
    if (this.state.url == random) {
      index++ > 4 ? (random = pic1) : (random = picArray[index + 1])
    }

    this.setState({ url: random || pic1 })
  }

  render() {
    return (
      <div >
        <ImageCode
          imageUrl={this.state.url}
          onReload={this.onReload}
          onMatch={() => {
            console.log("code is match")
          }}
        />
      </div>
    )
  }
}
export default Verify